<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/reset.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="root">
			<div class="img_1">
				<img src="images/123.png" alt="">
			</div>
			<div class="img_2">
				<img src="images/jindu.gif" alt="">
			</div>
			<div class="img_3">
				<span id="num"></span>
			</div>
			<div class="img_4">
				<audio style="display:none; height: 0" id="bg-music" preload="auto" src="bgm.mp3" loop="loop"></audio>
				<img src="images/yinyue.gif" alt="">
			</div>
		</div>
		
		
		<script>
			var num = document.getElementById("num");
			function num1(count){
				if(count < 10){
					return "0"+count;
				}
				return count;
			}
			
			var count = 0;
			var html = "";
				var timer = setInterval(function(){
					count++;
					html = count;
					num.innerHTML = num1(html) + "%";
					if(html >=100){
						clearInterval(timer);
						location.href='index1.html';
					}
				},40)
			  
				
				
				//音乐自动播放
				window.onload=function(){
					autoPlayMusic();
					audioAutoPlay();
				}
				function audioAutoPlay() {
					var audio = document.getElementById('bg-music');
					audio.play();
				}
				// 音乐播放
				function autoPlayMusic() {
					// 自动播放音乐效果，解决浏览器或者APP自动播放问题
					function musicInBrowserHandler() {
						musicPlay(true);
						document.body.removeEventListener('touchstart', musicInBrowserHandler);
					}
					document.body.addEventListener('touchstart', musicInBrowserHandler);
					
				function musicPlay(isPlay) {
					var media = document.querySelector('#bg-music');
					if (isPlay && media.paused) {
						media.play();
					}
					if (!isPlay && !media.paused) {
						media.pause();
					}
				}
				}
		</script>
	</body>
</html>
